<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号(ID)" prop="id" min-width="90"/>
                <el-table-column label="报名账号" min-width="140" prop="account" />
                <el-table-column label="嘉宾姓名" min-width="140" prop="username" />
                <el-table-column label="联系电话" min-width="140" prop="phone" />
                <el-table-column label="分享内容" min-width="200" prop="content" />
                <el-table-column label="能力凭证" min-width="140" prop="pics">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image style="width: 38px; height: 38px;margin-right: 10px;" v-for="(item,index) in row.pics" :key="index"
                                    :src="item"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    :preview-src-list="[item]"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="申请状态" min-width="140" prop="status" >
                    <template #default="{row}">
                        <span v-if="row.status == 1">申请中</span>
                        <span v-if="row.status == 2">已通过</span>
                        <span v-if="row.status == 3">已驳回</span>
                        <span v-if="row.status == 4">已联系</span>
                        <span v-if="row.status == 5">可以重新申请</span>
                    </template>
                </el-table-column>
                <el-table-column label="驳回原因" min-width="140" prop="notice" />
                <el-table-column label="报名时间" min-width="180" prop="created" />
                <el-table-column label="操作" min-width="180">
                     <template #default="{row}">
                        <div v-if="row.status == 1">
                            <el-button type="danger" link @click="handleCheck(row)">审核驳回</el-button>
                            <el-button type="primary" link @click="changeStatus(row)">审核通过</el-button>
                        </div>
                     </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists"/>
            </div>
        </el-card>

        <check_entry v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck" />
    </div>
</template>
<script lang="ts" setup name="sail">
import { applyList, authApply } from '@/api/operation';
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import check_entry from './check_entry.vue'

const queryParams:any = reactive({
  
})
const {pager, getLists, resetPage, resetParams} = usePaging({
  fetchFun: applyList,
  params: queryParams
})
getLists()

const changeStatus = async (row:any) => {
    try {
        await feedback.confirm('是否确认审核通过，通过后请及时与嘉宾取得联系', '审核通过')
        await authApply({ 
            apply_id: row.id,
            status: 2,
            notice: ''
        })
        feedback.msgSuccess('审核通过')
        getLists()
    } catch (error) {

    }
}
const checkState = reactive({
    show: false,
    value: '',
})
const handleCheck = (value : any) => {
    checkState.show = true
    checkState.value = value.id;
}
const checkStop = ref(true)
const handleConfirmCheck = async (value : any) => {
    console.log(checkStop.value)
    console.log(value)
    if (checkStop.value) {
        checkStop.value = false;
        console.log('checkStop')
        try{
            await authApply({
                apply_id: value.id,
                status: 3,
                notice: value.reason
            })
            checkState.show = false
            getLists()
            setTimeout(()=>{
                checkStop.value = true;
            },1000)
        }catch(error) {
            console.log(error)
            checkStop.value = true;
        }
    }
    
}

</script>